<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>

<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>

<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%--
    This file is an entry point for JavaServer Faces application.
--%>

<html>
    <head>
        <link rel="stylesheet" href="http://openlayers.org/website.css" type="text/css" />
        
        <style type="text/css">
            .smallmap {
                border:1px solid #CCCCCC;
                height:500px;
                width:100%;
            }
            .olControlEditingToolbar  {
                float:none;
                top: 10px;
                margin-top: 10px;
                right: 0px;
                height: 30px; 
                width: 200px;
            }
            .results{
                border: 1px solid #0173a3;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sun Gemini Geo Visor</title>
        
        <script src="lib/OpenLayers.js"></script>
        <script src="javascripts/dyg/customOpenLayers.js"></script>

	<script src="lib/mootools.js"></script>
	<script src="lib/geovisor.js"></script>
        
    </head>
    <body onload="init()">
        <f:view>
            <table cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td width="300px">
                        <img src="images/sungemini.jpg" alt="Logo sun gemini">
                    </td>
                    <td  align="right" style="background: transparent url(images/header-bg.gif) repeat-x scroll 0% 0%;">
                        <img src="images/header.jpg" alt="Logo sun gemini">
                    </td>
                </tr>
            </table>
            <table width="100%">
                
                <tr>
                    <td valign="top">
                        <div id="leftColumn">
                            <h:form>
                                <rich:panel header="Datos de la Dirección">
                                    <span class="texto">Dirección:</span>
                                    <h:inputText size="50" value="#{richFacesBean.text}" >
                                        <!--a4j:support event="onkeyup" reRender="rep"/-->
                                    </h:inputText>
                                    <a4j:commandButton actionListener="#{richFacesBean.search}" reRender="rep" value="Buscar"/>
                                    <h2>Direcciones obtenidas</h2>
                                    <div class="results" id="results">
                                        <rich:dataList var="site" value="#{richFacesBean.sites}" id="rep">
                                            <a onclick='recenter(<h:outputText value="#{site.lon}"/>, <h:outputText value="#{site.lat}"/>)' href="#">
                                                <h:outputText value="#{site.address}"/>
                                            </a>
                                        </rich:dataList>
                                    </div>
                                    
                                </rich:panel>
                                <br/>
                                <rich:panel header="Coordenadas">
                                    <b class="texto">Longitud, Latitud:</b>
                                    <div id="coordDiv" class="nav">
                                    </div>
                                </rich:panel>
                                <br/>
                                <rich:panel header="Overview">
                                    <div id="overviewDiv" class="nav">
                                    </div>
                                </rich:panel>
                            </h:form>
                        </div>
                    </td>
                    <td valign="middle" height="100%" bgcolor="#DFDCD7">
                        <a href="#" id="hideLeftColumn">
                            <img src="images/hide.jpg" border="0">
                        </a>
                        <a href="#" id="showLeftColumn">
                            <img src="images/show.jpg" border="0">
                        </a>
                    </td>
                    <td width="100%">
                        <div id="map" class="smallmap"/>
                    </td>
                </tr>
            </table>
        </f:view>
    </body>
</html>
